<template>
<div>
	<div class="table-column" >
    <div
			class="table-column-td"
			v-for="(item,index) in model.deviceStates" :key="index"
			:style="[
				bgColor(item?.state),
				item.style[timeRange] || {}
			]"
		>
      <div class="wrapper" :title="item?.state">{{ item?.state||'xxxxx' }}</div>
    </div>
  </div>
</div>
</template>
<script setup>
import { computed } from 'vue'

const props = defineProps({
  model: {
    type: Object,
    required: true,
    default: () => {
      return {}
    }
  },
  timeRange: {
    type: Number,
    default: 0
  }
})
const colorMap = {
  运行: 'rgba(91, 144, 212)',
  待机: 'rgba(144, 147, 153)',
  停机: 'rgba(245, 108, 108)',
  故障: 'rgba(230, 162, 60)',
  检修: 'rgba(144, 147, 153)',
  充电: 'rgba(80, 169, 108)',
  报警: 'rgba(255,0,0,1)'
}
// 使用计算属性,根据colorMap 计算背景渐变颜色
const bgColor = computed(() => {
  return (state) => {
    const color = colorMap[state]
    if (color) {
      return {
        background: `linear-gradient(90deg, ${color} 0%, ${color} 100%)`
      }
    }
  }
})
// 计算父元素的的实际宽度
const parentWidth = computed(() => {
  const index = props.model.deviceStates.length

  let width = 'width:100%'
  if (index > -1) {
    const style = props.model.deviceStates[index - 1]
    const str = style.style[props.timeRange]
    console.log('style', str)
    if (!str) return

    const sum = str.split(';')
      .filter(item => item)
      .map(declaration => declaration.split(':')[1]) // 提取值部分
      .filter(value => value.includes('vw')) // 过滤包含vw的值
      .map(vwValue => parseFloat(vwValue.replace('vw', ''))) // 转换为数字
      .reduce((acc, curr) => acc + curr, 0)

    width = `width:${sum}vw`
  }
  return width
})

</script>

<style scoped lang="less">
.table-column {
  display: flex;
  align-items: center;
  height: 25px;
  font-size: 12px;
  box-sizing: border-box;
	position: relative;
	.table-column-td{
		position: absolute;
		border-radius: 10px;
		// background: linear-gradient(90deg, #4290d3 0%, #6fb4ef 100%);

		.wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 18px;
			width: 100%;
		}
	}
}
</style>
